<template>
  <div class="line-container">
    <div>
      <div id="mapChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaJson from '../assets/json/data.json' // json数据引入
import zejiang from '../assets/json/zejiang.json'
import huzhou from '../assets/json/huzhou.json'
import nanxun from '../assets/json/nanxun.json'

export default {
  name: 'mapChart',
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item',
        },
        label: {
          show:true,
        },
      },
      mapChart: '',
      level: 1
    }
  },
  created() {},
  mounted() {
    this.getMapChart()
  },
  methods: {
    // echarts初始化
    getMapChart() {
      this.mapChart = echarts.init(document.getElementById('mapChart'))

      echarts.registerMap('china', chinaJson);

      this.option.series = [{
        type: 'map',
        map: 'china',
        zoom: 1.25,
        roam: true,
        itemStyle: {
          normal: {
           borderColor: 'rgb(147, 235, 248)',
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0,
                color: '#09132c' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#274d68'  // 100% 处的颜色
              }],
              globalCoord: true // 缺省为 false
              },
          },
          emphasis: {
            areaColor: 'rgb(46,229,206)',
            borderWidth: 0.1
          }
        },
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#1DE9B6'
            }
          },
          emphasis: {
            textStyle: {
              color: 'rgb(183,185,14)'
            }
          }
        },
      }]
      this.mapChart.setOption(this.option)

      echarts.registerMap('province', zejiang)
      echarts.registerMap('city', huzhou)
      echarts.registerMap('region', nanxun)

      // 获取地图数据
      const map = this.getMap()
     
      // 点击地图省份
      this.mapChart.on('click', (params) => {
        console.log(params)
        // let mapData = zejiang;

        if(params.name === '浙江' || params.name === "湖州市" || params.name === "南浔区"){
          if (this.level === 1) {
            	this.level = 2
          } else if (this.level === 2) {
              	this.level = 3
          } else if (this.level === 3) {
              	this.level = 4
          }
          this.option.series = map[this.level]
          this.mapChart.clear()
          this.mapChart.setOption(this.option)
        }
      })
      // 点击所有地方触发(空白)
      this.mapChart.getZr().on('click', (event) => {
        // 该监听器正在监听一个`zrender 事件`。
        // console.log(event.target, this.level)
        // 点击空白处回到上一级
        console.log(11111)
        if (!event.target && this.level !== 1) {
          if (this.level === 2) {
            this.option.series = [{
                type: 'map',
                map: 'china',
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: '#1DE9B6'
                    }
                  },
                  emphasis: {
                    textStyle: {
                      color: 'rgb(183,185,14)'
                    }
                  }
                },
                zoom: 1.25,
                roam: true
            }]
            this.level = 1
          } else if (this.level === 3) {
            this.option.series = map[2]
            this.level = 2
          } else if (this.level === 4) {
            this.option.series = map[3]
            this.level = 3
          }
          this.mapChart.setOption(this.option)
        }
      });
    },
    // 获取地图数据
    getMap () {
      const map = {
        2: [{
              type: 'map',
              map: 'province',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },
              itemStyle: {
                normal: {
                borderColor: 'rgb(147, 235, 248)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#09132c' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#274d68'  // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                  },
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                  borderWidth: 0.1
                }
              },
              // zoom: 1,
              roam: true
          }],
        3: [{
              type: 'map',
              map: 'city',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },
              itemStyle: {
                normal: {
                borderColor: 'rgb(147, 235, 248)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#09132c' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#274d68'  // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                  },
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                  borderWidth: 0.1
                }
              },
              // zoom: 1,
              roam: true,
          }],
        4: [{
              type: 'map',
              map: 'region',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },
              itemStyle: {
                normal: {
                borderColor: 'rgb(147, 235, 248)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#09132c' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#274d68'  // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                  },
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                  borderWidth: 0.1
                }
              },
              // zoom: 1,
              roam: true,
          }
        ]
      }
      return map
    }
  }
}
</script>

<style>
#mapChart {
  	width: 509px;
 	height: 393px;
}
</style>
